<template>
    <div class="formbuilder">
        <el-alert title="自定义表单未作保存操作，本人建议 json 数据应用MongoDB 存储" type="error" />
        <div class="btnbox" style="margin-top: 15px">
            <el-button @click="showpreview">预览</el-button>
            <el-button type="primary">保存</el-button>
            <el-button @click="openmodel">JSON</el-button>
        </div>
        <div class="formbox">
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="my-border">
                        <div class="widget-cate">基础组件</div>
                        <Draggable
                                :list="list"
                                :animation="100"
                                item-key="id"
                                :clone="cloneData"
                                class="list-group"
                                :group="{ name: 'c',pull:'clone',put:false}"
                                :forceFallback="false"
                                ghost-class="ghost"
                                :sort="false"
                        >
                            <template #item="{ element }">
                                <div class="items">
                                    <div class="title">{{ element.componentName }}</div>
                                </div>
                            </template>
                        </Draggable>
                        <el-alert style="margin-top: 16px" title="其他组件开发中~ 可根据需求自定义组件" type="info" />
                    </div>
                </el-col>
                <el-col :span="16" >
                    <div class="my-border">
                        <el-form ref="formRef" :model="form" label-width="120px">
                            <Draggable
                                    :list="clist"
                                    :animation="100"
                                    item-key="id"
                                    class="list-group"
                                    group="c"
                                    :forceFallback="false"
                                    ghost-class="ghost"
                                    :group="{ name: 'c', pull:false}"
                                    :sort="true"
                                    @change="onMoveCallback"
                            >
                                <template #item="{ element,index }">
                                    <render @click="clickElementnow(element)" :formData="formData" :eleData="element" @del="del(index)" @copy="deepCopy(element,index )"/>
                                </template>
                            </Draggable>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="my-border">
                        <eleInfo :eleInfo="eleInfo" :formInfo="formInfo"/>
                    </div>
                </el-col>
            </el-row>
        </div>

        <codeInfo ref="codeEle" />
        <preview ref="previewModel" />
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref,onMounted} from 'vue';
    import { useStore } from 'vuex'
    import Draggable from 'vuedraggable'
    import render from "@/components/customForm/render.vue";
    import eleInfo from "@/components/customForm/eleInfo.vue";
    import codeInfo from "@/components/customForm/codeInfo.vue";
    import {getComponent} from "@/api/component"
    import preview from "@/components/customForm/preview.vue";
    export default defineComponent({
        name: 'formbuilder',
        components:{Draggable,render,eleInfo,codeInfo,preview},
        setup() {
            //组件列表
            const list = ref([
                {
                    componentName: '输入框',
                    id: 1,
                    componentType:'input'
                },
                {
                    componentName: 'select选择器',
                    id: 2,
                    componentType:'select'
                }
            ])

            const onMoveCallback = (val:any) => {
                if(val.removed){
                    return false
                }
            }


            //表单组件信息
            const clist = ref([])

            const fold = (val:any) => {
                val.isflod = !val.isflod
            }

            //json 组件
            const codeEle = ref()
            const openmodel = ()=>{
                codeEle.value.open({
                    formInfo:formInfo.value,
                    componentInfo:clist.value
                });
            }
            const formData = ref({})
            const eleInfo = ref(null)

            const store = useStore()
            const clickElementnow = (ele:any)=>{
                eleInfo.value = ele
                store.commit("SET_CLICKNOW",ele)
            }

            //深拷贝
            const cloneData = (original:any)=>{
                original.sign = getUUID()
                original.rules = {}
                original.option = []
                return JSON.parse(JSON.stringify(original));
            }
            // 获取唯一uuid
            function getUUID() {
                return Math.random().toString(36).substr(3, 10)
            }

            //预览
            const previewModel = ref()
            const showpreview = ()=>{
                previewModel.value.open(clist.value)
            }
            const deepCopy = (ele:any,index:any)=>{
                let element:any = Object.assign({},ele)
                element.sign = getUUID()
                clist.value.splice( index, 0, element)
            }
            const del = (index:any)=>{
                clist.value.splice(index, 1)
            }

            // 表单信息

            const formInfo = ref({})
            onMounted(()=>{
                getComponent().then(res=>{
                    list.value = res.data
                })
            })
            return {list,clist,codeEle,formData,eleInfo,previewModel,formInfo,
                deepCopy,
                del,
                cloneData,clickElementnow,openmodel,onMoveCallback,fold,showpreview};
        },
    });
</script>
<style lang="scss">
    .formbox{
        /*height: calc(100vh - 180px);*/
        width: 100%;
        margin-top: 15px;
    }
    .my-border {
        border: 1px solid #DCDCDC;
        padding: 10px;
        height: calc(100vh - 240px);
        overflow-y: auto;
    }
    .items{
        cursor: pointer;
        background: #f4f6fc;
        border: 1px solid #f4f6fc;
        color: #333;
        font-size: 12px;
        padding: 0 10px;
        margin: 5px 0;
        line-height: 26px;
        box-sizing: border-box;
        width: 48%;
        float: left;
        margin-left: 1%;
    }
    .items:hover{
        color: #40a9ff;
        border: 1px dashed #409eff;
    }
    .list-group{
        /*height: 100%;*/
    }
    .title{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
